import React,{Component} from "react"
import {axios} from "&/axios"
import {
    Button,
    Input
}from "antd"
export default class GoodsDetail extends Component{
    state={
        good:null,
        count:1
    }
    componentDidMount(){
        axios.post("/api/getGoodDetail",{
            _id:this.props.match.params.goodId
        }).then(res=>{
            this.setState({

                good:res.data.result
            })
        })
    }
    // componentWillMount=()=>{
    //     this.setState=(state,callback)=>{
    //         return;
    //     }
    // }
    gotopaynow=()=>{
        this.props.history.push("/main/shopping/paynow")
    }
    addShopCart=()=>{
        axios.post("/api/addshopcart",{
            count:this.state.count,
            goodId:this.state.good._id,
            good:this.state.good
        }).then(res=>{
            // this.props.history.push("")
        })
    }
    gotoCart=()=>{
        this.props.history.push("/main/shopping/my")
    }
    handleDesc=()=>{
        if(this.state.count>1){
            this.setState({
                count:--this.state.count
            })
        }
    }
    handleAdd=()=>{
        this.setState({
            count:++this.state.count
        })
    }
    changeCount=(e)=>{
        if(e.target.value>0){
            this.setState({
                count:e.target.value
            })
        }
    }
    render(){
        const{
            history,
            match,
            location
        }=this.props;
        const{
            good,
            count
        }=this.state;
        return(
            <div>
                <h2>社区在线购物  -  省时省心省钱1111</h2>
                <Button type="primary" onClick={()=>this.props.history.go(-1)}>返回</Button>
                {good&&<div style={{marginTop:20,border:"2px solid #e4e4e4",borderRadius:10,width:400,padding:20,boxSizing:'border-box'}}>
                    <h1> {new URLSearchParams(location.search).get('name') } </h1>
                    <img src={good.img} style={{width:'100%',margin:'10px auto',height:280}} alt=""/>
                    <div >
                        <p style={{color:'green'}}>单价: {good.price} /RMB    折扣 : {good.discount} </p>
                        <p style={{color:'deeppink'}}>分类 : {good.type.text} </p>
                    </div>
                    <div style={{height:50,display:'flex',alignItems:'center'}}>
                        <Button type="danger" onClick={this.handleAdd}>+</Button>
                        <Input  style={{width:100}} type="number" value={count} onChange={count=>this.changeCount(count)} />
                        <Button type="danger" onClick={this.handleDesc}>-</Button>
                    </div>
                    <div>
                        <Button type="primary" onClick={this.gotopaynow}>立即购买</Button>
                        <Button type="danger" onClick={this.addShopCart}>加入购物车</Button>
                        <Button type="primary" onClick={this.gotoCart}>我的商品</Button>
                    </div>
                </div>}
            </div>
        )
    }
}